<template>
  <div class="container" ref="containerRef"></div>
</template>

<script lang="ts" setup>
import { Graph } from "@antv/x6";

const containerRef = ref<HTMLDivElement>();

// 初始化画布
function initGraph(dom: HTMLDivElement): Graph {
  return new Graph({
    container: dom,
    autoResize: true,
    grid: {
      visible: true,
      type: "doubleMesh",
      args: [
        {
          color: "#ddd", // 网格线颜色
          thickness: 1, // 网格线宽度
        },
        {
          color: "#000", // 网格线颜色
          thickness: 1, // 网格线宽度
          factor: 8, // 主次网格线间隔
        },
      ],
    },
    panning: true,
    mousewheel: true,
    background: {
      color: "#F2F7FA",
    },
  });
}
// 画 画布
function drawGraph(graph: Graph) {
  const node1 = graph.addNode({
    shape: "rect",
    x: 100,
    y: 40,
    width: 100,
    height: 40,
    label: "test rect",
    ports: {
      items: [
        {
          id: "port_1",
          position: "bottom",
          // group: "bottom",
        },
      ],
    },
  });
  const node2 = graph.addNode({
    shape: "rect",
    x: 100,
    y: 600,
    width: 100,
    height: 40,
    label: "test rect2",
    ports: {
      items: [
        {
          id: "port_1",
          position: "bottom",
          // group: "bottom",
        },
      ],
    },
  });

  const edge1 = graph.addEdge({
    target: node1,
    source: node2,
    label: "test edge",
  });
  const edge2 = graph.addEdge({
    target: { x: 300, y: 50 },
    source: { x: 300, y: 600 },
    label: "test edge",
  });
  graph.addEdge({
    target: edge2,
    source: edge1,
    label: "test edge",
  });
  graph.addEdge({
    target: edge2,
    source: edge1,
    label: "test edge2",
  });
}

onMounted(() => {
  if (containerRef.value) {
    const graph = initGraph(containerRef.value);
    drawGraph(graph);
  }
  // graph.centerContent();
});
</script>

<style>
.container {
  height: 100%;
}
</style>
